<template>
  <div>
    <el-option
      v-for="item in listData"
      :key="item[extendKeyName] ? `${item[keyName]}-${item[extendKeyName]}` : item[keyName]"
      :label="item[labelName] + `${notShowLabelFoot?'':footText(item)}`"
      :value="valueType==='object'? item : item[keyName]" >
      <div :class="{'check-user-container':showCheckUser}">
        <div v-if="customLabel">{{ item[labelName]+`${leftTag}${customItem(item)}${rightTag}` }}</div>
        <el-tooltip v-else-if="openToolTip" :open-delay="800" placement="right">
          <div slot="content" style="max-width: 200px;">{{ item[labelName] + `` }} <span v-if="externKey && item[externKey]">(历史：{{ item[externKey] }})</span></div>
          <div class="option-row">
            <div class="ellipsisOne">{{ item[labelName] + footText(item) }} <span v-if="externKey && item[externKey]" style="color: #406eff;">(历史：{{ item[externKey] }})</span></div>
            <i v-if="isCanDelete" class="el-icon-close" @click.stop="handleDelete(item[keyName])" />
          </div>
        </el-tooltip>
        <div v-else class="ellipsisOne">{{ item[labelName] + footText(item) }} <span v-if="externKey && item[externKey]" style="color: #406eff;">(历史：{{ item[externKey] }})</span></div>
        <template v-if="showCheckUser">
          <div class="flex"/>
          <CheckUserInfo :user-id="item[keyName]" style="margin-right: 4px;" />
        </template>
      </div>
    </el-option>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'listData',
    event: 'change'
  },
  props: {
    listData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    valueType: { // 如果值为object,则值使用对象传输
      type: String,
      default: ''
    },
    labelName: { // label的字段
      type: String,
      default: 'userName'
    },
    keyName: { // key的字段
      type: String,
      default: 'id'
    },
    foot: {
      type: String,
      default: ''
    },
    notShowLabelFoot: {
      type: Boolean,
      default: false
    },
    externKey: {
      type: String,
      default: ''
    },
    openToolTip: { // 是否展示列表的tooltip
      type: Boolean,
      default: false
    },
    customLabel: { // 是否展示自定义的选项(合同-签约对方选项展示)
      type: Boolean,
      default: false
    },
    extendKeyName: { // 额外做key的字符
      type: String,
      default: ''
    },
    footTag: {
      type: String,
      default: '[]'
    },
    isCanDelete: {
      type: Boolean,
      default: false
    },
    showCheckUser: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leftTag() {
      return this.footTag === '()' ? '(' : '[';
    },
    rightTag() {
      return this.footTag === '()' ? ')' : ']';
    }
  },
  methods: {
    footText(item) {
      if (this.foot && item[this.foot]) {
        return `${this.leftTag}${item[this.foot]}${this.rightTag}`;
      }
      return '';
    },
    customItem(item) {
      const type = item.type;
      return {
        0: '飞博供应商',
        1: '有赞供应商',
        2: '萌力供应商',
        3: '销售客户',
        4: '萌力客户'
      }[type];
    },
    handleDelete(key) {
      this.$emit('onDelete', key);
    }
  }
};
</script>

<style scoped lang="scss">
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &::v-deep {
    .el-icon-close {
      margin-left: 8px;
      font-size: 12px;
    }
  }
}
.check-user-container {
  display: flex;
  align-items: center;
  .flex {
    flex: 1;
  }
}
</style>
